<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="归属项目">
              <a-select :options="projectList" placeholder="请选择归属项目" v-model="queryParam.projectId"></a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="来源类型">
              <a-select :options="sourceTypeList" placeholder="请选择来源类型" v-model="queryParam.sourceType"></a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="使用状态">
              <a-select :options="stateList" placeholder="请选择使用状态" v-model="queryParam.state"></a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="设备状态">
              <a-select :options="statusList" placeholder="请选择设备状态" v-model="queryParam.status"></a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="设备名称">
              <a-input placeholder="请输入设备名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="设备编号">
              <a-input placeholder="请输入设备编号" v-model="queryParam.number"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="8" :md="11" :sm="24">
            <a-form-item label="保管人">
              <a-input placeholder="请输入保管人" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="6" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdds('add','新增')" icon="plus" style="background-color:#32cd99;color: white;">新增设备</a-button>
    </div>
    <!-- table区域-begin -->

    <div>
      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="picture" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <imgs-preview v-else :imgs="text" imgH="25px"></imgs-preview>
        </template>
        <template slot="sourceType" slot-scope="text,record">
          <span
            :style="{color:text === '1'?'#32cd99':text === '2'?'#0066cc':text === '3'?'#FF9900':text === '4'?'#ff4d4f':''}">{{text === '1'?'自有':text === '2'?'月租':text === '3'?'台班':text === '4'?'班组':''}}</span>
        </template>
        <template slot="status" slot-scope="text,record">
          <span
            :style="{color:text === '1'?'#ff4d4f':text === '2'?'#FF9900':text === '3'?'#0066cc':''}">{{text === '1'?'较差':text === '2'?'一般':text === '3'?'良好':''}}</span>
        </template>
        <template slot="state" slot-scope="text,record">
          <span
            :style="{color:text === '1'?'#FF9900':text === '2'?'#ff4d4f':text === '3'?'#0066cc':''}">{{text === '1'?'闲置':text === '2'?'待修':text === '3'?'在用':''}}</span>
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="handleAdds('detail',record)" style="margin-right: 10px;">详情 </a>
          <a @click="handleAdds('edit',record)" style="margin-right: 10px;">编辑 </a>
          <a @click="handleDetails('detail',record)">进出场信息 </a>
        </template>
      </a-table>
    </div>
    <device-modal ref="modalForm" @ok="modalFormOk"></device-modal>
    <jinchu-modal ref="modalForm1" @ok="modalFormOk"></jinchu-modal>
    <!-- <wt-zujie-modal ref="modalForm1" @ok="modalFormOk"></wt-zujie-modal> -->
    <!-- <wt-zujie1-modal ref="modalForm2" @ok="modalFormOk"></wt-zujie1-modal> -->
  </a-card>
</template>
<script>
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import deviceModal from './components/deviceModal'
  import jinchuModal from './components/jinchuModal'
  import {
    set
  } from 'vuedraggable'
  export default {
    name: 'Devicetype',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      // WtDeviceinformationModal,
      // WtZujieModal,
      // WtZujie1Modal
      deviceModal,jinchuModal
    },
    data() {
      return {
        description: '类别管理页面',
        // 表头
        columns: [{
            title: '设备图片',
            align: "center",
            dataIndex: 'picture',
            width: 150,
            scopedSlots: {
              customRender: 'picture'
            }
          },
          {
            title: '设备编号',
            align: "center",
            dataIndex: 'number',
          },
          {
            title: '设备类型',
            align: "center",
            dataIndex: 'type',
          },
          {
            title: '设备名称',
            align: "center",
            dataIndex: 'name'
          },
          {
            title: '规格型号',
            align: "center",
            dataIndex: 'model'
          },
          {
            title: '牌号',
            align: "center",
            dataIndex: 'mark'
          },
          {
            title: '估值(元)',
            align: "center",
            dataIndex: 'appraisement'
          },
          {
            title: '来源类型',
            align: "center",
            dataIndex: 'sourceType',
            scopedSlots: {
              customRender: 'sourceType'
            },
            /* customRender:function (t,r,index) {
             return t === '1'?'自有':t === '2'?'月租':t === '3'?'台班':t === '4'?'班组':'';
            } */
          },
          {
            title: '制造年月',
            align: "center",
            dataIndex: 'makeDate'
          },
          {
            title: '生产厂家',
            align: "center",
            dataIndex: 'factory'
          },
          {
            title: '归属项目',
            align: "center",
            dataIndex: 'projectName'
          },
          {
            title: '当前存放位置',
            align: "center",
            dataIndex: 'address'
          },
          {
            title: '保管人',
            align: "center",
            dataIndex: 'realname'
          },
          {
            title: '设备状态',
            align: "center",
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            },
            /* customRender:function (t,r,index) {
             return t === '1'?'较差':t === '2'?'一般':t === '3'?'良好':'';
            } */
          },
          {
            title: '设备使用状态',
            align: "center",
            dataIndex: 'state',
            scopedSlots: {
              customRender: 'state'
            },
            /* customRender:function (t,r,index) {
             return t === '1'?'闲置':t === '2'?'待修':t === '3'?'在用':'';
            } */
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 210,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        levelOneOptions: [],

        url: {
          list: "/equipment/wtEquipment/list",
          delete: "/wtCategory/delete",
          deleteBatch: "/wtCategory/deleteBatch",
          exportXlsUrl: "/wtCategory/exportXls",
          importExcelUrl: "/wtCategory/importExcel",

        },
        dictOptions: {},
        superFieldList: [],
        projectList: [],
        sourceTypeList: [{
          label: '自有',
          value: '1'
        }, {
          label: '月租',
          value: '2'
        }, {
          label: '台班',
          value: '3'
        }, {
          label: '班组',
          value: '4'
        }], //来源类型
        statusList: [{
          label: '较差',
          value: '1'
        }, {
          label: '一般',
          value: '2'
        }, {
          label: ' 良好',
          value: '3'
        }], //设备状态
        stateList: [{
          label: '闲置',
          value: '1'
        }, {
          label: '待修',
          value: '2'
        }, {
          label: ' 在用',
          value: '3'
        }], //使用状态
      }
    },
    created() {
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      handleAdds: function(type, record) {
        if (type === 'add') {
          this.$refs.modalForm.title = '新增';
          this.$refs.modalForm.disabled = false;
          this.$refs.modalForm.disableSubmit = false;
          this.$refs.modalForm.add(type, record);
        } else if (type === 'edit') {
          this.$refs.modalForm.title = '编辑';
          this.$refs.modalForm.disabled = false;
          this.$refs.modalForm.disableSubmit = false;
          this.$refs.modalForm.edit(type, record);
        } else if (type === 'detail') {
          this.$refs.modalForm.title = '详情';
          this.$refs.modalForm.disabled = true;
          this.$refs.modalForm.disableSubmit = true;
          this.$refs.modalForm.edit(type, record);
        }
      },
      handleDetails: function(type, record) {
        if (type === 'detail') {
          this.$refs.modalForm1.title = '进出场信息';
          this.$refs.modalForm1.disabled = true;
          this.$refs.modalForm1.disableSubmit = true;
          this.$refs.modalForm1.edit(type, record);
        }
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams(); //查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result;
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.projectList = [];
            let treeList = res.result;
            this.projectList = [...treeList].map((v) => ({
              ...v,
              value: v.id,
              label: v.departName,
            }))
          }
        })
      },
      initDictConfig() {},
      getSuperFieldList() {
        let fieldList = [];
        fieldList.push({
          type: 'string',
          value: 'parentId',
          text: '父id',
          dictCode: ''
        })
        fieldList.push({
          type: 'string',
          value: 'name',
          text: '名称',
          dictCode: ''
        })
        fieldList.push({
          type: 'int',
          value: 'type',
          text: '类型 0一级 1 二级 2 级',
          dictCode: ''
        })
        fieldList.push({
          type: 'int',
          value: 'num',
          text: '数量',
          dictCode: ''
        })
        this.superFieldList = fieldList
      },

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>